<template>
  <Card dis-hover :bordered="false">
    <Input
      v-width="220"
      class="ivu-mb-16"
      placeholder="请输入文件名"
      clearable
      v-model="params.name"
      @on-enter="changeSearch"
      @on-clear="changeSearch"
      v-hasC="{ name: 'v1-base-file-index', flag: 'v1/base/file/index' }"
    />
    <Button
      class="ivu-fr ivu-mb-16"
      type="primary"
      @click="handleAdd"
      v-hasC="{
        name: 'v1-base-file-update-file-temp3',
        flag: 'v1/base/file/update-file-temp',
      }"
      >上传</Button
    >
    <Button
      class="ivu-mr-16 ivu-ml-16 ivu-fr ivu-mb-16"
      :disabled="selection.length > 0 ? false : true"
      type="primary"
      @click.stop="changetype"
      v-hasC="{
        name: 'v1-base-file-update-file-category',
        flag: 'v1/base/file/update-file-category',
      }"
      >批量分类</Button
    >

    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      :border="true"
      @on-selection-change="changeSelection"
      @on-cell-click="cheageRow"
      v-hasC="{ name: 'v1-base-file-index', flag: 'v1/base/file/index' }"
    >
      <template #fileName="{ row }">
        <Input
          v-if="row.isEdit"
          v-model="row.name"
          @on-blur="changeInput(row)"
          @change="handleEditinput"
        ></Input>
        <span v-else>{{ row.name }}</span>
      </template>
      <template #preview="{ row }">
        <img
          v-if="+row.type === 1"
          :src="row.path"
          @click.stop="callClick(row)"
          style="object-fit: contain; width: 80px; height: 40px"
        />
        <Icon
          v-else
          type="logo-youtube"
          @click.stop="callClick(row)"
          size="24"
        />
      </template>
      <template #action="{ row }">
        <!-- <a @click="handleEdit(index)">编辑</a> -->
        <!-- <Divider type="vertical"></Divider> -->
        <a
          @click.stop="handleDelete(row)"
          class="delete"
          v-hasC="{
            name: 'v1-base-file-delete-file',
            flag: 'v1/base/file/delete-file',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      show-total
      show-sizer
      show-elevator
      :total="total"
      :current.sync="params.page"
      :page-size="params.pageSize"
      @on-change="changepage"
      @on-page-size-change="changepageSize"
      v-hasC="{ name: 'v1-base-file-index', flag: 'v1/base/file/index' }"
    ></Page>
    <Modal v-model="modal" title="批量修改分类">
      <Form
        ref="formvild"
        :model="formData"
        inline
        label-position="top"
        :rules="ruleValidate"
        @on-cancel="handleCancel(formvild)"
      >
        <FormItem>
          <Select
            v-model="formData.category_id"
            style="width: 400px"
            placeholder="请选择分类"
            filterable
            :only-filter-with-text="true"
          >
            <Option v-for="item in typeList" :value="item.id" :key="item.id">{{
              item.name
            }}</Option>
          </Select>
        </FormItem>
      </Form>
      <template #footer>
        <Button @click="handleCancel(formvild)">取消</Button>
        <Button
          type="primary"
          @click="handleSubmit(formvild)"
          :loading="modalLoading"
          >确定</Button
        >
      </template>
    </Modal>
    <!-- modal上传图片和视频 -->
    <Modal
      class="modalM"
      v-model="modalstatus"
      title="上传"
      width="750"
      footer-hide
      @on-cancel="changemodal"
      :mask-closable="false"
    >
      <!-- <upload></upload> -->
      <div>
        <Tabs type="card">
          <TabPane label="上传图片">
            <uplodimg ref="uplodimg"></uplodimg>
          </TabPane>
          <TabPane label="上传视频">
            <uplodvideos ref="uplodvideos"></uplodvideos>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
    <!-- 列表视频弹窗 -->
    <Modal v-model="imgModal" footer-hide>
      <div v-if="+type === 1">
        <p slot="header">查看大图</p>
        <img :src="imgUrl" alt="" style="width: 100%; object-fit: cover" />
      </div>
      <div v-else>
        <p slot="header">播放视频</p>
        <video
          :src="imgUrl"
          controls="controls"
          style="width: 100%; object-fit: cover"
        ></video>
      </div>
    </Modal>
  </Card>
</template>
<script>
import { fileIndex, updateFile, categoryIndex, deleteFile, updatefileCategory } from '@/api/set'
import uplodimg from './components/uplodimg.vue'
import uplodvideos from './components/uplodvideos.vue'
export default {
  name: 'modalName',
  components: { uplodimg, uplodvideos },
  data () {
    return {
      add: true,
      modal: false,
      imgUrl: '',
      typeList: [],
      imgModal: false,
      type: '',
      total: 0,
      modalLoading: false,
      params: { page: 1, pageSize: 10, name: '' },
      formData: {
        category_id: ''
      },
      modalstatus: false,
      loading: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: 'id',
          key: 'id',
          width: 80
        },
        {
          title: '文件名',
          slot: 'fileName',
          minWidth: 208,
          tooltip: true,
        },
        {
          title: '预览',
          slot: 'preview',
          align: 'center',
          width: 120
        },
        {
          title: '文件大小',
          key: 'size',
          width: 118,
          sortable: true
        },
        {
          title: '类型/格式',
          width: 158,
          render: (h, params) => h('span', params.row.type == 1 ? '图片' : params.row.type == 2 ? '视频' : '')
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 180
        },
        {
          title: '操作',
          slot: 'action',
          width: 100
        }
      ],
      list: [],
      ruleValidate: {
        category_id: [{ required: true, message: '请选择分类', trigger: 'change' }]
      },
      selection: []
    }
  },
  mounted () {
    this.getData()
    this._gettype()
  },
  methods: {
    changemodal () {
      this.modalstatus = false
    },
    changeSearch () {
      this.getData()
    },
    changepage (index) {
      this.params.page = index
      this.getData()
    },
    changepageSize (val) {
      this.params.pageSize = val
      this.getData()

    },
    getData () {
      this.loading = true
      const params = {
        page: this.params.page,
        pageSize: this.params.pageSize,
        name: this.params.name
      }
      fileIndex(params).then(res => {
        this.list = res.list
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取类别
    _gettype () {
      categoryIndex({}).then(res => {
        this.typeList = res.list
      }).catch(() => {
        // this.tableLoading = false
      })
    },
    callClick (row) {
      this.imgModal = true
      this.type = row.type
      this.imgUrl = row.path
    },
    // 更新文件
    getname (item) {
      let params = {
        id: item.id,
        name: item.name
      }
      updateFile(params).then(res => {
        this.$Message.success('保存成功')
        item.isEdit = false
        this.getData()
      })
    },
    //批量分类
    changetype () {
      this.modal = true
    },
    changeSelection (selection) {
      this.selection = []
      selection.map(item => {
        this.selection.push(item.id)
      })
    },
    //点击单选框事件
    cheageRow (e) {
      e.isEdit = true
    },
    changeInput (row) {
      // console.log(row,'row')
      this.getname(row)
      // this.input=val
    },
    handleCancel () {
      this.$refs.formvild.resetFields()
      this.modalLoading = false
    },
    handleSubmit () {
      this.modalLoading = true
      this.$refs.formvild.validate((valid) => {
        if (valid) {
          const params = {
            id: this.selection,
            category_id: this.formData.category_id
          }
          updatefileCategory(params).then(res => {
            this.$Message.success('批量修改成功!')
            this.getData()
            this.handleCancel()
          }).catch(() => {
            this.modalLoading = false
          })

        }
      })
    },
    handleEditinput () {
      //
    },
    handleAdd () {
      this.add = true
      this.modalstatus = true
      this.$refs.uplodimg.initial()
      this.$refs.uplodvideos.initial()
    },
    handleEdit (e) {
      this.add = false
      this.modalstatus = true
    },
    handleDelete (row) {
      this.$Modal.confirm({
        title: '温馨提示',
        content: '确定删除此项?',
        onOk: () => {
          deleteFile({ id: row.id }).then(res => {
            this.$Message.success('删除成功！')
            this.getData()
          })

        }
      })
    },
    handleCancel () {
      this.modal = false
    },
  },
}
</script>
<style lang='less' scoped>
.modalM {
  position: relative;
}
.imageUpdate {
  display: flex;
}

.delete {
  color: rgb(226, 5, 5);
}
</style>
